<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>
    <a-card :bordered="false">
      <a-row v-if="loading" style="text-align: center"><a-spin /></a-row>
      <template v-else>
        <a-row :gutter="[16, 30]" type="flex" align="middle">
          <a-col class="required" :span="2" style="text-align: right"> 是否开启： </a-col>
          <a-col :span="22">
            <a-radio-group name="radioGroup" v-model="territorial.is_enable">
              <a-radio :value="0"> 关闭 </a-radio>
              <a-radio :value="1"> 开启 </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="top">
          <a-col :span="2" style="text-align: right"> 允许购买区域： </a-col>
          <a-col :span="22">
            <a-card v-for="(province, index) of province_list" size="small" :key="index" style="margin-bottom: 10px">
              <a-button slot="extra" size="small" @click="delProvince(index)">删除</a-button>
              <a-row type="flex">
                <span
                  style="margin-right: 10px"
                  v-for="(item, index1) of province.province_list"
                  :key="index + '' + index1"
                >
                  {{ item.name }}
                </span>
              </a-row>
            </a-card>
            <a-button @click="showInfoStatus = true" icon="plus" size="small"> 新增条目 </a-button>
          </a-col>
        </a-row>
        <a-row :gutter="[16, 30]" type="flex" align="middle">
          <a-col offset="10">
            <a-button type="primary" @click="onSave"> 保存 </a-button>
          </a-col>
        </a-row>
      </template>
      <a-modal
        v-model="showInfoStatus"
        destroyOnClose
        v-if="district.length > 0"
        :width="700"
        title="添加运费规则"
        @ok="handleOk"
      >
        <a-row>
          <a-tree-select
            v-model="selectData"
            style="width: 100%"
            :tree-data="district"
            :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }"
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="请选择地区"
            :dropdownStyle="{maxHeight:'250px'}"
          />
        </a-row>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { Edit, Save } from '@/api/setting/territorial'
import { STable } from '@/components'
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
export default {
  name: 'Territorial',
  components: {
    STable,
  },
  data() {
    return {
      SHOW_PARENT,
      loading: false,
      showInfoStatus: false, // 是否展示地区
      province_list: [],
      territorial: { name: '', is_enable: 1 },
      district: [],
      selectData: [], // 选中的数据
      resArr:[]
    }
  },
  created() {
    this.onEdit()
  },
  methods: {
    renameDistrictKey(arr) {
      arr.forEach((item) => {
        item.type = item.level
        if (item.cityAll || item.districtAll) {
          item.children = item.cityAll || item.districtAll
          this.renameDistrictKey(item.cityAll || item.districtAll)
        }
      })
    },
    onEdit(id) {
      this.loading = true
      this.selectData = []
      this.province_list = []
      Edit().then((res) => {
        this.province_list = res.data.model ? JSON.parse(res.data.model.detail) : []
        this.district = res.data.district
        this.renameDistrictKey(this.district)
        this.territorial = res.data.model ? res.data.model : { name: '', is_enable: 0 }
        this.loading = false
      })
    },
    onSave(id) {
      this.$message.loading({ content: '提交中', key: 'updatable' })
      Save({ territorial: this.territorial, detail: this.province_list }).then((res) => {
        if (res.code === 0) {
          this.$message.success({ content: res.msg, key: 'updatable' })
          this.$nextTick(() => {
            this.selectData = []
          })
        } else {
          this.$message.error({ content: res.msg, key: 'updatable' })
        }
      })
    },
    handleOk() {
      this.showInfoStatus = false
      this.resArr = []
      this.selectData.forEach((item) => {
        this.filterSelectList(item, this.district)
      })
      var data = {
        province_list: this.resArr,
      }
      this.province_list.push(data)
    },
    filterSelectList(id, arr) {
      arr.forEach((el) => {
        if (id == el.id) {
          this.resArr.push(el)
        }
        if (el.children) {
          this.filterSelectList(id, el.children)
        }
      })
    },
    delProvince(index) {
      this.province_list.splice(index, 1)
    },
  },
}
</script>
<style lang="less" scoped>
.required::before {
  content: '*';
  color: red;
}
</style>
